<!--suppress JSValidateTypes, JSUnresolvedReference -->
<script setup>
import {reactive, ref, nextTick} from 'vue'
import {useHomeStore} from '@/stores/home'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'
dayjs.extend(relativeTime)
dayjs.locale('zh-cn')

const useStore = useHomeStore()

const scrollbarRef = ref()
const innerRef = ref()
const data = reactive({
  ws: null,
  msgArr: [],
  msg: ''
})

const update = () => {
  if (useStore.token) {
    data.ws = new WebSocket(`wss://pandax.online/chat?token=${useStore.token}`)
    data.ws.onopen = () => {
      // data.msgArr.push({type: '公告', message: '加入在线聊天'})
    }
    data.ws.onmessage = e => {
      const obj = JSON.parse(e.data)
      obj['type'] = '消息'
      data.msgArr.push(obj)
      nextTick(() => {
        scrollbarRef.value?.setScrollTop(innerRef.value.clientHeight)
      })
    }
  }
}

const destroy = () => {
  data.ws.onopen = null
  data.ws.onmessage = null
  data.ws = null
  data.msgArr = []
  data.msg = ''
}

const doMessage = () => {
  data.ws.send(data.msg)
  data.msg = ''
}
</script>

<template>
  <el-dialog
      @opened="update"
      @close="destroy"
      v-model="useStore.isShowChat"
      @contextmenu.stop.prevent :show-close="true"
      center
      width="min(600px, 90%)"
      style="border-radius: 12px"
      title="在线聊天"
  >
    <el-scrollbar height="50vh" ref="scrollbarRef">
      <ul ref="innerRef">
        <li v-for="item in data.msgArr">
          <template v-if="item.type === '消息'">
            <div style="margin-bottom: 8px">
              <div class="message-item" :class="{mine: item.uuid === useStore.userinfo.uuid}">
                <el-avatar v-if="item.uuid === useStore.userinfo.uuid" :size="36" :src="useStore.avatar" shape="square" />
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="item.username"
                    placement="bottom-start"
                    v-else
                >
                  <el-avatar :size="36" src="/images/avatar.png" shape="square" />
                </el-tooltip>
                <div class="message-main" :class="{mine: item.uuid === useStore.userinfo.uuid}">{{item.message}}</div>
              </div>
            </div>
          </template>
        </li>
      </ul>
    </el-scrollbar>
    <div class="send-message">
      <el-input v-model="data.msg" placeholder="请输入要发送的消息" />
      <el-button class="send-message-btn" type="primary" @click="doMessage">发送</el-button>
    </div>
  </el-dialog>
</template>

<style scoped>
.send-message {
  display: flex;
}
.send-message .send-message-btn {
  margin-left: 8px;
}
.message-item {
  display: flex;
  align-items: flex-start;
}
.message-item.mine {
  flex-direction: row-reverse;
}
.message-main {
  position: relative;
  margin-left: 16px;
  border-radius: 3px;
  padding: 8px 12px;
  background-color: #a9ea7a;
}
.message-main.mine {
  margin-left: 0;
  margin-right: 16px;
}
.message-main:after {
  content: '';
  display: block;
  position: absolute;
  top: 6px;
  left: -12px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-right-color: #a9ea7a;
}
.message-main.mine:after {
  left: auto;
  right: -12px;
  border-right-color: transparent;
  border-left-color: #a9ea7a;
}
.box-item {
  width: 110px;
  margin-top: 10px;
}
</style>